<template>
    <div class="content">
      <div class="item" :key="i.id" v-for="i in data">
        <img :src="i.img">
        <span class="title">{{i.value}}</span>
      </div>
    </div>
  </template>
  
  <script>
  import data from "./data.json";
  export default {
    data() {
      return {
        data
      };
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .content {
    // column-width: 30px; // 设置每列宽度，列数由总宽度与每列宽度计算得出
    column-count: 5; // 设置共有几列
    column-gap: 10px; // 设置列与列之间的间距
    padding: 10px;
    .item {
      break-inside: avoid; // 避免元素在列中换行
      border: 1px solid #999;
      margin-bottom: 10px;
      cursor: pointer;
      img {
        width: 100%;
        vertical-align: middle;
      }
      .title {
        display: block;
        margin-left: 5px;
      }
    }
  }
  </style>
  